

<template>
  <div>
    <!-- <el-menu :default-active="this.$route.path" class="el-menu-demo" router mode="horizontal" @select="handleSelect">
      <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
        {{ item.navItem }}
      </el-menu-item>
    </el-menu> -->
    <el-menu :default-active="this.$route.path" class="el-menu-demo" router mode="horizontal" @select="handleSelect" style="box-shadow: 0 0 5px #0003;">
      <el-row type="flex" class="row-bg" justify="space-between" style="padding:0">
        <el-col :span="6" :offset="1">
          <!-- <div class="grid-content bg-purple"></div> -->
          <div class="left" @click="backHome()">
            <img src="../assets/titleLogo.png" alt=""  width="32px"
              style="vertical-align:middle;margin-right:10px;" class="poi">
            <span class="nihong">TaoLVTC</span>
          </div>
        </el-col>
        <el-col :span="6" class="test">
          <!-- <div class="grid-content bg-purple"></div> -->
          <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
            {{ item.navItem }}
          </el-menu-item>
          <div v-if="loading">
            <el-menu-item index="/login">登录</el-menu-item>
          </div>
          <div v-else>
            <el-submenu index="/login">
              <template slot="title"><img :src="userInfo.image" width="40px" height="40px" alt="avatar"
                  style="margin-right:15px; border-radius: 50%;"></template>
              <el-menu-item index="/personal-center">个人中心</el-menu-item>
              <el-menu-item>消息</el-menu-item>
              <el-menu-item @click.native="quit">退出</el-menu-item>
            </el-submenu>
          </div>
        </el-col>
      </el-row>
    </el-menu>
  </div>
</template>

<script>
import { getPersonaData } from '@/api/personalCenter';

export default {
  data() {
    return {
      navList: [
        { name: '/', navItem: '首页' },
        { name: '/Share', navItem: '分享' },
        { name: '/Tutorials', navItem: '发布帖子' },
        // {name:'/personal-center',navItem:'个人中心'},
        // {name:'/login',navItem:'登录'},
      ],
      userId: JSON.parse(localStorage.getItem("user")).id,
      token: localStorage.getItem("token"),
      userInfo: {},
      loading: true,
    }
  },
  created() {
    this.isLogin();
  },
  methods: {
    handleSelect(key, keyPath) {

    },
    quit() {
      this.$router.push("/login");
      localStorage.removeItem("token");
    },
    getUserImg() {
      getPersonaData({ id: this.userId }).then(res => {
        this.userInfo = res[0];
        console.log(this.userInfo);
      })
    },
    isLogin() {
      if (this.token == null) {
        this.loading = true;
      } else {
        this.getUserImg();
        this.loading = false;
      }
    },
    backHome() {
      this.$router.push("/");
    }
  }
}
</script>

<style scoped>
* {
  font-family: Microsoft Yahei UI, serif;
}

.test {
  display: flex;
  flex-direction: row;
  justify-content: end;
}

.poi:hover {
  cursor: pointer;
}

.left {
  line-height: 56px;
  display: flex;
  align-items: center;
  text-overflow: clip;
  cursor: pointer;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

a {
  text-decoration: none;
  color: #333;
}

a:hover {
  color: #999;
}

.box {
  width: 100%;
  display: flex;
  position: absolute;
  top: 0;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 20px;
  z-index: 9999;
  background-color: rgb(255, 228, 196);
}

.nihong {
  color: black;
  font-size: 18px;
  font-weight: 800;
}

p {
  margin: 2px 0 2px 0;
}
</style>